<template>
  <view>
    <view
      v-if="show"
      class="home"
    >
      <!-- <view class="home"> -->
      <view class="notice-bar">
        <!-- 名人名言 -->
        <!-- <van-notice-bar left-icon="chat-o" :text="textList[random]" /> -->
        <van-notice-bar
          left-icon="chat-o"
          :text="textList"
        />
      </view>
      <!-- 功能列表 -->
      <view class="grid">
        <van-grid
          clickable
          column-num="2"
        >
          <van-grid-item
            icon="clock-o"
            link-type="reLaunch"
            url="/subpkg/date/index"
            text="时间差计算器"
          />
          <van-grid-item
            icon="calendar-o"
            link-type="reLaunch"
            url="/subpkg/calendar/index"
            text="中国日历"
          />
          <van-grid-item
            icon="location-o"
            link-type="reLaunch"
            url="/subpkg/weather/index"
            text="城市天气"
          />
          <van-grid-item
            icon="closed-eye"
            link-type="reLaunch"
            url="/subpkg/encryption/index"
            text="字符加解密"
          />
          <van-grid-item
            icon="fire"
            icon-color="red"
            link-type="reLaunch"
            url="/subpkg/rankings/index"
            text="豆瓣电影Top10"
          />
          <van-grid-item
            icon="logistics"
            link-type="reLaunch"
            url="/subpkg/expressage/index"
            text="物流信息查询"
          />
          <van-grid-item
            icon="info-o"
            link-type="reLaunch"
            url="/subpkg/ICPIofo/index"
            text="ICP备案信息查询"
          />
          <!-- 此项api因未备案，无法添加request合法域名 -->
          <!-- <van-grid-item
            icon="desktop-o"
            link-type="reLaunch"
            url="/subpkg/whois/index"
            text="WHOIS查询"
          /> -->
          <!-- 个人小程序审核不通过，上线前注释掉73-78行的代码 -->
          <van-grid-item
            icon="newspaper-o"
            link-type="reLaunch"
            url="/subpkg/everyDay/index"
            text="每天60秒读懂世界"
          />
          <van-grid-item
            icon="search"
            link-type="reLaunch"
            url="/subpkg/ipHome/index"
            text="IPv4归属地查询"
          />
          <van-grid-item
            icon="exchange"
            link-type="reLaunch"
            url="/subpkg/conversion/index"
            text="简/繁体转换"
          />
          <van-grid-item
            icon="user-o"
            link-type="reLaunch"
            url="/subpkg/BMI/index"
            text="BMI计算器"
          />
          <!-- <van-grid-item
            icon="search"
            link-type="reLaunch"
            url="/pages/demo/index"
            text="ReLaunch 跳转"
          />
          <van-grid-item
            icon="search"
            link-type="reLaunch"
            url="/pages/demo/index"
            text="ReLaunch 跳转"
          />
          <van-grid-item
            icon="search"
            link-type="reLaunch"
            url="/pages/demo/index"
            text="ReLaunch 跳转"
          />
          <van-grid-item
            icon="search"
            link-type="reLaunch"
            url="/pages/demo/index"
            text="ReLaunch 跳转"
          />
          <van-grid-item
            icon="search"
            link-type="reLaunch"
            url="/pages/demo/index"
            text="ReLaunch 跳转"
          />
          <van-grid-item
            icon="search"
            link-type="reLaunch"
            url="/pages/demo/index"
            text="ReLaunch 跳转"
          /> -->
        </van-grid>
      </view>
    </view>
    <van-loading
      v-else
      size="100rpx"
      >正在拼命加载中，请稍后...</van-loading
    >
  </view>
</template>

<script>
import mixin from '@/mixins/mixins'
export default {
  name: 'Home',
  mixins: [mixin],
  data() {
    return {
      random: 0, // 随机数
      // textList: [], // 名言列表
      textList: '', // 名言列表
      show: false // loading状态
    }
  },
  created() {
    setTimeout(() => {
      this.show = true // 正在加载中
    }, 100)
    // 名人名言
    // this.textList.push(
    //   '书是人类进步的阶梯 —— 高尔基',
    //   '书籍是人类知识的总统 —— 莎士比亚',
    //   '人的影响短暂而微弱，书的影响则广泛而深远 —— 普希金',
    //   '千里之行，始于足下 —— 老子',
    //   '一个爱书的人，他必定不致于缺少一个忠实的朋友，一个良好的老师，一个可爱的伴侣，一个温情的安慰者 —— 巴罗',
    //   '奇文共欣赏，疑义相如析——陶渊明',
    //   '聪明的人有长的耳朵和短的舌头。 —— 弗莱格',
    //   '重复是学习之母。 —— 狄慈根',
    //   '当你还不能对自己说今天学到了什么东西时，你就不要去睡觉。 —— 利希顿堡',
    //   '好问的人，只做了五分种的愚人；耻于发问的人，终身为愚人。 —— 佚名',
    //   '路漫漫其修道远，吾将上下而求索 —— 屈原',
    //   '我需要三件东西：爱情、友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友 —— 蒙田',
    //   '如果你爱一个人，先要使自己现在或将来百分之百的值得他爱，至于他爱不爱你，那是他的事，你可以如此希望，但不必勉强去追求。 —— 罗兰',
    //   '也许每一个男子全都有过这样的两个女人，至少两个。娶了红玫瑰，久而久之，红的变了墙上的一抹蚊子血，白的还是“床前明月光”；娶了白玫瑰，白的便是衣服上沾的一粒饭粘子，红的却是心口上一颗朱砂痣。',
    //   '你若爱她，让你的爱像阳光一样包围她，并且给她自由。',
    //   '要想成就伟业，除了梦想，必须行动。',
    //   '如果失去梦想，人类将会怎样？',
    //   '一块砖没有什么用，一堆砖也没有什么用，如果你心中没有一个造房子的梦想，拥有天下所有的砖头也是一堆废物；但如果只有造房子的梦想，而没有砖头，梦想也没法实现。—— 俞敏洪',
    //   '心存希望，幸福就会降临你；心存梦想，机遇就会笼罩你。',
    //   '努力向上吧，星星就躲藏在你的灵魂深处；做一个悠远的梦吧，每个梦想都会超越你的目标。',
    //   '无论哪个时代，青年的特点总是怀抱着各种理想和幻想。这并不是什么毛病，而是一种宝贵的品质。',
    //   '学习知识要善于思考、思考、再思考，我就是靠这个学习方法成为科学家的。—— 爱因斯坦',
    //   '提出一个问题往往比解决一个问题更重要，因为解决问题也许仅仅是一个教学上或实验上的技能而已。而提出新的问题新的可能性，从新的角度去看旧的问题，都需要有创造性的想像力，而且标志着科学的真正进步。 —— 爱因斯坦',
    //   '科学是使人的精神变得勇敢的最好途径。—— 布鲁诺',
    //   '人类看不见的世界，并不是空想的幻影，而是被科学的光辉照射的实际存在。尊贵的是科学的力量。—— 居里夫人',
    //   '如果学习只在于模仿，那么我们就不会有科学，也不会有技术。—— 高尔基',
    //   '科学如同大海，要求奋不顾身的拼搏。—— 兰道',
    //   '一个实现梦想的人，就是一个成功的人。',
    //   '事实上是，哪个男孩女孩没有做过上天入地移山倒海的梦啊，只不过在生活面前，很多人慢慢放弃了自己童年的梦想，所以他们沦落为失去梦想的人；而有些人，无论生活多么艰难，从来没有放弃梦想，于是，他们成为永葆青春梦想永葆奋斗激情的人能够改变世界创造未来的人。—— 徐小平',
    //   '心存希望，幸福就会降临你；心存梦想，机遇就会笼罩你。',
    //   '爱情不是花荫下的甜言，不是桃花源中的密语，不是轻绵的眼泪，更不是死硬的强迫，爱情是建立在共同的基础上的。 —— 莎士比亚'
    // )
    // // 随机数
    // const max = this.textList.length - 1
    // this.random = parseInt(Math.random() * (max - 0) + 0)
    this.getWitticismList()
    // console.log(this.textList[this.random], this.random)
  },
  methods: {
    // 名人名言 随机一句一言
    async getWitticismList() {
      try {
        const res = await this.$http.get('ian?type=json')
        // console.log(res)
        this.textList = `${res.data.vhan} —— ${res.data.source}`
      } catch (error) {
        // this.$msg('名人名言获取失败')
      }
    }
    // onPageScroll(e) {
    //   console.log(e)
    // }
  }
}
</script>

<style lang="scss" scoped>
// 头部名言固定定位
::v-deep .data-v-71e217db {
  position: relative;
}
::v-deep .notice-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80rpx;
  z-index: 99999;
}
// 加载中的样式 居中对齐
::v-deep .van-loading {
  width: 750rpx;
  height: 100rpx;
  position: absolute;
  top: 460rpx;
  left: 0;
}
.home {
  // 功能
  .grid {
    margin-top: 80rpx;
  }
}
</style>
